<template>
	<view class="ass_page">
		<uv-navbar placeholder title="售后详情" @leftClick="leftClick" />
		<view class="payment-success-container" v-if="info.status==0">
			<view class="success-content">
				<view class="success-icon"></view>
				<h1 class="success-title">您的售后申请已提交成功</h1>
				<view class="success-message">我们已收到您的申请，将在1-3个工作日内处理完成，请保持电话畅通</view>
			</view>
		</view>
		<view class="payment-success-container" v-if="info.status==1">
			<view class="success-content">
				<view class="success-icon"></view>
				<h1 class="success-title">您的售后申请已成功处理</h1>
				<view class="success-message">退款金额将在1-3个工作日内原路退回</view>
			</view>
			<view class="refund">
				<view class="pd10">
					<uv-cell-group :border="false">
						<uv-cell title="退款金额">
							<template #value>
								<uv-text :text="info.refund_amount" size="12" bold color="#ff0000" align="right" />
							</template>
						</uv-cell>
						<uv-cell title="订单编号" :value="info.order_info.order_no"></uv-cell>	
						<uv-cell title="退款时间" :value="info.audit_time"/>
						<uv-cell title="退款方式" value="原路退回"/>
					</uv-cell-group>
				</view>
			</view>
		</view>
		<view class="pd10" v-if="info.status==1">
			<uv-text text="感谢您选择我们的服务" size="14" align="center"></uv-text>
			<uv-text type="info" text="如有任何疑问，请联系我们的客服人员" size="13" align="center"></uv-text>
		</view>	

		<view class="error-container" v-if="info.status==2">
			<view class="error-content">
				<view class="error-icon"></view>
				<h1 class="error-title">很遗憾，您的售后申请被驳回</h1>
				<view class="error-message">我们已认真审核您的申请，但无法满足您的售后请求</view>
			</view>
			<view class="pd10">
				<view class="error-alert">
					<view class="error-content">
						<view class="err-info"><uv-icon name="info-circle-fill" color="#d70012"></uv-icon> 申请信息不完整
						</view>
						<uv-text type="info" size="12" :text="info.reason"></uv-text>
					</view>
				</view>
			</view>

		</view>
		<view class="order-section" v-if="info.status != 1">
			<uv-text text="申请信息" bold="true" size="14"></uv-text>
			<view class="flex padding2">
				<uv-image class="margin20" width="80" height="80" radius="3" :src="info.order_info.product_image" />
				<view class="flex-1 flex align-start justify-between">
					<view>
						<uv-text :text="info.order_info.product_name" color="#333" size="15" />
						<uv-text :text="info.order_info.spec_values"
							:custom-style="{background:'#f2f2f2',padding:'5px'}" color="#333" size="22upx"
							v-if="info.order_info.spec_values" />
					</view>

					<view class="jiage">
						<view class="t1">￥{{info.order_info.product_price}}</view>
						<view class="t2">x{{info.order_info.num}}</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view class="lbl_info">服务时间</view>
				<view class="content_info">{{info.order_info.service_time}}</view>
			</view>
			<view class="order-info">
				<view class="lbl_info">服务地点</view>
				<view class="content_info">
					{{info.order_info.address.address}}
				</view>
			</view>
			<view class="order-info">
				<view class="lbl_info">服务总额</view>
				<view class="content_info">￥{{info.order_info.total_price}}</view>
			</view>
			<view class="order-info" v-if="info.order_info.night_price">
				<view class="lbl_info">夜间调度费</view>
				<view class="content_info">￥{{info.order_info.night_price}}</view>
			</view>
			<view class="order-info">
				<view class="lbl_info">实付金额</view>
				<view class="content_info">￥{{info.order_info.total_price}}</view>
			</view>
			<view v-if="info.apply_reason">
				<view class="order-info">
					<view class="lbl_info">详细说明</view>
				</view>
				<uv-text type="info" :text="info.apply_reason" size="12" block></uv-text>
			</view>
			<view v-if="info.images.length>0">
				<view class="order-info">
					<view class="lbl_info">上传凭证</view>
				</view>
				<uv-album :urls="info.images" singleSize="80" multipleSize="60"></uv-album>
			</view>
		</view>
		<view class="footer-btn">
			<view class="order-actions">
				<!-- 联系客服 -->
				<uv-button class="contact-service" plain icon="kefu-ermai" size="normal" @click="contactService">
					联系客服
				</uv-button>
				<uv-button class="cancel-order" type="error" size="normal" @click="cancelApply" v-if="info.status==0">
					撤销申请
				</uv-button>
				<uv-button class="cancel-order" type="error" size="normal" @click="reApply" v-if="info.status==2">
					再次申请
				</uv-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getIconPath
	} from '@/util'
	import { backToTargetPage } from '@/util/tools'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getAfterSalesDetail,
		revokeAfterSales
	} from '@/api'
	import {
		useRefreshStore
	} from '@/store'
	const refreshStore = useRefreshStore()
	const info = ref({})
	const showPayInfo = ref(false)
	const iconName = ref('arrow-down')
	const apply_type = ref('1')
	const apply_reason = ref('')
	const images = ref([])
	const showBase = () => {
		showPayInfo.value = !showPayInfo.value
		iconName.value = iconName.value === 'arrow-down' ? 'arrow-up' : 'arrow-down'
	}
	const copyOrderNo = () => {
		uni.setClipboardData({
			data: info.value.order_info.order_no,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		})
	}
	const leftClick = () => {
		backToTargetPage('pages-user/order')
	}
	const upimgSuccess = (fileList) => {
		images.value = fileList
	}
	onLoad(async (option) => {
		if (option.id) {
			info.value = (await getAfterSalesDetail({
				id: option.id
			})).result
		}
	})

	const cancelApply = async () => {
		uni.showModal({
			title: '提示',
			content: '确定撤销售后申请吗？',
			success: async (res) => {
				if (res.confirm) {
					let result = await revokeAfterSales({
						id: info.value.id
					})
					if (result.code == 200) {
						refreshStore.setRefresh(true)
						uni.navigateTo({
							url: '/pages-home/service/revoke_result?id=' + info.value.order_id
						})
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						})
					}
				}
			}
		})
	}
	
	const reApply = () => {
		uni.navigateTo({
			url: '/pages-home/service/ass_apply?id=' + info.value.order_id + '&after_sales_id=' + info.value.id
		})
	}
</script>

<style lang="scss" scoped>
	.ass_page {
		background-color: #f7f7f7 !important;
		min-height: 100vh;
		padding-bottom: 80px;
		width: 100%;
	}

	.payment-success-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		padding: 20px 15px;
		margin: 10px;
		border-radius: 8px;
		position: relative;
	}

	.success-content {
		text-align: center;
		max-width: 400px;
		width: 100%;
	}

	.success-icon {
		width: 80px;
		height: 80px;
		margin: 0 auto 20px;
		background-color: #4CAF50;
		border-radius: 50%;
		position: relative;
	}

	/* 使用CSS绘制对勾 */
	.success-icon::before {
		content: '';
		position: absolute;
		width: 24px;
		height: 12px;
		border-left: 4px solid white;
		border-bottom: 4px solid white;
		transform: rotate(-45deg);
		left: 50%;
		top: 50%;
		margin-left: -12px;
		margin-top: -8px;
	}

	.success-title {
		font-size: 20px;
		font-weight: 500;
		color: #333;
		margin-bottom: 15px;
	}

	.success-message {
		font-size: 14px;
		color: #999;
		line-height: 1.5;
	}

	.error-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		padding: 20px 15px;
		margin: 10px;
		border-radius: 8px;
		position: relative;
	}

	.error-content {
		text-align: center;
		max-width: 400px;
		width: 100%;
	}


	.error-icon {
		width: 80px;
		height: 80px;
		background-color: #FF4D4F;
		border-radius: 50%;
		position: relative;
		margin: 0 auto 20px;
	}

	.error-icon::before,
	.error-icon::after {
		content: '';
		position: absolute;
		width: 40px;
		height: 4px;
		background-color: white;
		top: 50%;
		left: 50%;
	}

	.error-icon::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.error-icon::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.error-title {
		font-size: 20px;
		font-weight: 500;
		color: #333;
		margin-bottom: 15px;
	}

	.error-message {
		font-size: 14px;
		color: #999;
		text-align: center;
		line-height: 1.5;
	}

	.pd10 {
		padding: 10px;
	}

	.error-alert {
		min-width: 300px;
		background-color: #fdf1f2;
		border-radius: 4px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		display: flex;
		padding: 16px;
		position: relative;
		overflow: hidden;
	}

	.error-alert::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 4px;
		background-color: #d70012;
	}

	.err-info {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 14px;
	}
	
	.refund {
		background-color: #f7f7f7;
		margin: 10px;
		border-radius: 8px;
		width: 100%;
	}

	.apply-section {
		background-color: #fff;
		padding: 20px 15px;
		margin: 10px;
		border-radius: 8px;
	}

	.addImg {
		display: flex;
		width: 200upx;
		height: 200upx;
		border-radius: 20upx;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #F0F0F0;

		text {
			color: #C8C8C8;
			font-size: 28upx;
		}
	}

	.order-section {
		background-color: #fff;
		padding: 20px 15px;
		margin: 10px;
		border-radius: 8px;
	}

	.padding2 {
		padding: 0 20upx;
		margin-bottom: 20upx;
		margin-top: 20upx;
	}

	.margin20 {
		margin-right: 20upx;
	}

	.t1 {
		color: #333;
		font-size: 30upx;
	}

	.t2 {
		color: #979797;
		font-size: 24upx;
		text-align: right;
	}

	.jiage {
		margin-left: 20upx;
	}

	.order-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 0;

		.lbl_info {
			width: 80px;
			font-size: 24upx;
		}

		.content_info {
			flex: 1;
			text-align: right;
			font-size: 24upx;
		}

		.lbl_pay {
			width: 80px;
			color: #979797;
			font-size: 24upx;
		}

		.pay_info {
			flex: 1;
			text-align: left;
			font-size: 24upx;
		}
	}

	.orderNo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24upx;
	}

	.orderNo .lbl_pay {
		color: #979797;
	}

	.orderNo .uv-icon {
		margin-left: 10px;
	}

	.orderNo .uv-button {
		margin-left: 10px;
	}

	.total-price {
		color: #f56c6c;
		font-weight: bold;
	}

	.footer-btn {
		position: fixed;
		bottom: 20px;
		left: 0;
		right: 0;
		padding: 0 15px;
		background-color: #fff;

		.order-actions {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px;
		}

		.contact-service {
			flex: 1;
			margin-right: 10px;
			color: #999;
			border-color: #eee;
		}

		.contact-service ::v-deep .uv-button__icon {
			font-size: 20px;
		}

		.cancel-order {
			flex: 1;
			background-color: #d70012;
			color: #fff;
		}
	}
</style>